@extends('layouts.default')
@section('seo-title', $seo['seo_title'])
@section('seo-description',$seo['seo_description'])
@section('seo-keywords',$seo['seo_keyword'])
@section('link-css')
    <link rel="stylesheet" href="/css/expert-share.css">
@endsection
@section('content')
    <main>
        <div class="container" id="expert-share">
            @if($star['url'])
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div id="guide-columns">
                            达人分享
                        </div>
                    </div>
                    <!--col-xs 手机端   col-sm PC端-->
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-9">
                        <div class="share-video" data-id="{{$star['id']}}">
                            <video id="share-video" controls poster="{{$website.$star['banner']}}">
                                <source
                                    src="{{$website.$star['url']}}"
                                    type="video/mp4">
                            </video>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 mobile-hide">
                        <div class="swiper-container swiper2">
                            <div class="swiper-wrapper">
                                @foreach($video as $item)
                                    <div class="swiper-slide" data-src="{{$website.$item['url']}}"
                                         data-id="{{$item['id']}}">
                                        <div>
                                            <img class="imgAutoHeight" src="{{$website.$item['banner']}}" alt=""
                                                 style="cursor: pointer" ;>
                                            <div class="content">{{$item['title']}}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 pc-hide">
                        <div class="swiper-container-mobile mt15">
                            <div class="swiper-wrapper">
                                @foreach($video as $item)
                                    <div class="swiper-slide" data-src="{{$website.$item['url']}}"
                                         data-id="{{$item['id']}}">
                                        <div>
                                            <img class="imgAutoHeight" src="{{$website. $item['banner']}}" alt="">
                                            <div class="content">{{$item['title']}}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <!--col-xs 手机端   col-sm PC端-->
                </div>
            @endif
            <div class="row">
                <div class="col-xs-12 col-sm-12">
                    <div id="guide-columns">
                        美肤秘籍
                    </div>
                </div>
                <!--col-xs 手机端   col-sm PC端-->
            </div>
            <div class="row equalWidth-box">
                <!--col-xs 手机端   col-sm PC端-->
                @foreach($news as $item)
                    <div class="col-xs-6 col-sm-4">
                        <a href="{{route('getDesc',['id' => $item['id']])}}">
                            <!--商品列表-->
                            <div class="list">
                                <div class="list-box equalWidth">
                                    @if($item['image_url'])
                                        <img class="list-img" src="{{$website . $item['image']}}" alt="">
                                    @else
                                        <img class="list-img" src="{{$meiji . $item['image']}}" alt="">
                                    @endif
                                </div>
                                <div class="list-content">
                                    <h2 class="list-title">{{$item['title']}}</h2>
                                    <div class="detail">
                                        <span class="time">{{$item['created_at']}}</span>
                                        <b></b>
                                        <a href="{{route('getDesc',['id' => $item['id']])}}" class="seeAll">查看全文>></a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </main>
@endsection
@section('link-js')
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            slidesPerView: 'auto',
        })

        var swiper = new Swiper('.swiper-container-mobile', {
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

    </script>
    <script src="/js/expert-share.js"></script>
@endsection
